<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!--TODO:头部顶部导航条  -->
    <div class="header_top_navigation">
      <div class="container">
        <!-- 头部顶部导航条左边 -->
        <div class="top_navigation_left">
          <a href="index.html">小米商城</a>
          <span class="spa">|</span>
          <a href="#">MIUI</a>
          <span class="spa">|</span>
          <a href="#">loT</a>
          <span class="spa">|</span>
          <a href="#">云服务</a>
          <span class="spa">|</span>
          <a href="#">天星科技</a>
          <span class="spa">|</span>
          <a href="#">有品</a>
          <span class="spa">|</span>
          <a href="#">小米开发平台</a>
          <span class="spa">|</span>
          <a href="#">企业团购</a>
          <span class="spa">|</span>
          <a href="#">资质证照</a>
          <span class="spa">|</span>
          <a href="#">协议规则</a>
          <span class="spa">|</span>
          <a href="#" class="download-a">下载app</a>
          <!-- 下载图标 -->
          <span class="download">
            <img src="../images/index/download.png" alt="" />
            小米商城APP
          </span>
          <span class="spa">|</span>
          <a href="#">智能生活</a>
          <span class="spa">|</span>
          <a href="#">Select Location</a>
        </div>
        <!-- 头部顶部导航栏购物车 -->
        <div class="top_navigation_shop">
          <a href="../html/shop-car.html" class="shop_cart">
            <em class="iconfont icon-gouwuche1"></em>
            <em class="shopping-text">购物车</em>
            <!-- 商品数量 -->
            <span class="quantityOfCommodity">(0)</span>
          </a>
          <div class="shopping_hint">
            <!-- 当有商品时候添加到这个里面 -->
            <ul class="shopping_productList"></ul>
            <em>购物车还没有商品，赶紧选购吧!</em>
          </div>
        </div>
        <!--头部顶部登录注册信息  -->
        <div class="top_navigation_news">
          <a href="../html/log-in.html" class="ring-up">登录</a>
          <span class="spa">|</span>
          <a href="#" class="sign-in">注册</a>
          <span class="spa">|</span>
          <span class="header-news">
            <a href="#" class="message-notification">消息通知</a>
          </span>
        </div>
      </div>
    </div>
    <!--TODO:菜单栏 -->
    <div class="menu_bar">
      <div class="container">
        <!-- logo -->
        <div class="menu_bar_logo">
          <a href="http://localhost:1995" class="bar_logo">
            <em class="mi_home"></em>
            <em class="mi_logo"></em>
          </a>
        </div>
        <!-- 一级菜单栏 -->
        <div class="fist_menu_bar">
          <ul>
            <li class="menu_bar_goods">
              <a href="../html/list.html" class="link_blak">
                <span class="text">全部商品分类</span>
              </a>
              <div class="goods_twoMenuBar">
                <ul>
                  <li>
                    <a href="#"
                      >手机 电话卡
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      >电视 盒子
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      >笔记本 显示器
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      >家电 插线板
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      >出行 穿戴
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      >智能 路由器
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      >电源 配件
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      >健康 儿童
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      >耳机 音箱
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                  <li>
                    <a href="#"
                      >生活 箱包
                      <em class="iconfont icon-right2"></em>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="bar_0">
              <a href="#" class="link">
                <span class="text">小米手机</span>
              </a>
              <div class="bar_0_MenuBar">
                <div class="container">
                  <ul>
                    <li>
                      <a href="#">
                        <div>
                          <img src="/images/index/menu_bar/xm1.webp" alt="" />
                        </div>
                        <em class="designation">小米10至尊纪念版</em>
                        <em class="price">5299元起</em>
                      </a>
                    </li>
                    <li>
                      <a href="http://localhost:1995/html/detail-page.html?product_id=10000214">
                        <div>
                          <img src="/images/index/menu_bar/xm2.webp" alt="" />
                        </div>
                        <em class="designation">小米10</em>
                        <em class="price">3799元起</em>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div>
                          <img src="/images/index/menu_bar/xm3.webp" alt="" />
                        </div>
                        <em class="designation">小米10青春版5G</em>
                        <em class="price">1899元起</em>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div>
                          <img src="/images/index/menu_bar/xm4.webp" alt="" />
                        </div>
                        <em class="designation">小米MIX Alpha</em>
                        <em class="price">19999元起</em>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li class="bar_1">
              <a href="#" class="link">
                <span class="text">Redmi红米</span>
              </a>
              <div class="bar_1_MenuBar">
                <div class="container">
                  <ul>
                    <li>
                      <a href="#">
                        <div>
                          <img src="/images/index/menu_bar/xm1.webp" alt="" />
                        </div>
                        <em class="designation">小米10至尊纪念版</em>
                        <em class="price">5299元起</em>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div>
                          <img src="/images/index/menu_bar/xm2.webp" alt="" />
                        </div>
                        <em class="designation">小米10</em>
                        <em class="price">3799元起</em>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div>
                          <img src="/images/index/menu_bar/xm3.webp" alt="" />
                        </div>
                        <em class="designation">小米10青春版5G</em>
                        <em class="price">1899元起</em>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div>
                          <img src="/images/index/menu_bar/xm4.webp" alt="" />
                        </div>
                        <em class="designation">小米MIX Alpha</em>
                        <em class="price">19999元起</em>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div>
                          <img src="/images/index/menu_bar/xm4.webp" alt="" />
                        </div>
                        <em class="designation">小米MIX Alpha</em>
                        <em class="price">19999元起</em>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div>
                          <img src="/images/index/menu_bar/xm4.webp" alt="" />
                        </div>
                        <em class="designation">小米MIX Alpha</em>
                        <em class="price">19999元起</em>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href="#" class="link">
                <span class="text">电视</span>
              </a>
            </li>
            <li>
              <a href="#" class="link">
                <span class="text">笔记本</span>
              </a>
            </li>
            <li>
              <a href="#" class="link">
                <span class="text">家电</span>
              </a>
            </li>
            <li>
              <a href="#" class="link">
                <span class="text">路由器</span>
              </a>
            </li>
            <li>
              <a href="#" class="link">
                <span class="text">智能硬件</span>
              </a>
            </li>
            <li>
              <a href="#" class="link">
                <span class="text">服务</span>
              </a>
            </li>
            <li>
              <a href="#" class="link">
                <span class="text">社区</span>
              </a>
            </li>
          </ul>
        </div>
        <!-- TODO:搜索框 -->
        <div class="search-box">
          <form class="search-box-form">
            <input type="text" placeholder="小米手机" class="searchBoxForm1" />
            <input
              type="submit"
              value="&#xe9cf;"
              class="iconfont icon-search11"
            />
          </form>
          <!-- 搜索框下的列表框 -->
          <div class="search-box-listbox">
            <ul>
              <li data-key="王一博同款手机">
                <a href="#">王一博同款手机</a>
              </li>
              <li data-key=" Note 9 新品"><a href="#">Note 9 新品</a></li>
              <li data-key="小米10"><a href="#">小米10</a></li>
              <li data-key="Redmi K30 Pro"><a href="#">Redmi K30 Pro</a></li>
              <li data-key="全部商品"><a href="#">全部商品</a></li>
              <li data-key="卡丁车"><a href="#">卡丁车</a></li>
              <li data-key="耳机"><a href="#">耳机</a></li>
              <li data-key="空调"><a href="#">空调</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
